<template>
  <div id="myApp" class="myHeight" >
    <el-container>
      <el-header>
        <el-col :span="6">
          <span style="font-size: 20px;margin-left:-65px;color: black">教务信息平台</span>
        </el-col>
        <el-col :span="8">&nbsp;</el-col>
        <el-col :span="12" align="right">
          <el-button type="info" size="mini" icon="el-icon-edit"  plain @click="openDialog">修改密码</el-button>
          <el-button type="info" size="mini" icon="el-icon-check" plain @click="loginout">退出系统</el-button>
          <i class="el-icon-s-custom person" ></i><span style="font-size: 18px;margin-left: 8px;"
                                                        @click="selectOne">{{ teaName }}</span>
        </el-col>
      </el-header>
      <el-container>
        <el-aside>
          <!--修改密码对话框-->
          <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" label-width="auto"
                     style="width:85%"
                     class="demo-form-inline form">
              <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.teaName" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="旧密码" :label-width="formLabelWidth">
                <el-input v-model="form.oldPwd" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item prop="newPwd" label="新密码" :label-width="formLabelWidth">
                <el-input v-model="form.newPwd" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item prop="newPwd2" label="确认密码" :label-width="formLabelWidth">
                <el-input v-model="form.newPwd2" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="updatePwd">确 定</el-button>
            </div>
          </el-dialog>
          <!--查询个人信息对话框-->
          <el-dialog title="个人信息" :visible.sync="dialogFormVisible1">
            <el-form  :model="tea"  label-width="auto"   style="width:85%"
                      class="demo-form-inline form">
              <el-form-item label="工号：">
                <el-input v-model="tea.teaId" placeholder="学号" readonly></el-input>
              </el-form-item>
              <el-form-item label="姓名：">
                <el-input v-model="tea.teaName" placeholder="姓名" readonly></el-input>
              </el-form-item>
              <el-form-item label="学院：">
                <el-input v-model="tea.teaAcademy" placeholder="学院" readonly></el-input>
              </el-form-item>
              <el-form-item label="职称：">
                <el-input v-model="tea.teaTitle" placeholder="专业" readonly></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel1">取 消</el-button>
              <el-button type="primary" @click="closeDialog">确 定</el-button>
            </div>
          </el-dialog>
          <el-menu router background-color="#afe9ff" collapse-transition
                   text-color="black" active-text-color="#ffd04b"  default-active="/welcome">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-tools" style="color: #13ce66"></i>
                <span class="size">学生管理</span>
              </template>
              <el-menu-item-group >
                <el-menu-item index="/teaInsertStudent" class="ms">录入学生</el-menu-item>
                <el-menu-item index="/teaStudentList" class="ms">查询学生</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-monitor" style="color: #13ce66"></i>
                <span class="size">选课管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/stuSeleList" class="ms">查询选课</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-date" style="color: #13ce66"></i>
                <span class="size">学力管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/insertWeight" class="ms">录入权重</el-menu-item>
                <el-menu-item index="/weightList" class="ms">查看权重</el-menu-item>
                <el-menu-item index="/insertWeightPoint" class="ms">录入学力</el-menu-item>
                <el-menu-item index="/motiveList" class="ms">查看学生学力值</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-custom" style="color: #13ce66"></i>
                <span class="size">成绩管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/insertGrade" class="ms">录入成绩</el-menu-item>
                <el-menu-item index="/stuGradeList" class="ms">查询成绩</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-message-solid" style="color: #13ce66"></i>
                <span class="size">警告管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/warning" class="ms">警告通知</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
  import axios from "axios";
  //导入Qs
  import Qs from 'qs'
  export default {
    data(){
      var validatePwd = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          if (this.form.newPwd2 !== "") {
            this.$refs.ruleForm.validateField("newPwd2");
          }
          callback();
        }
      };

      var validatePwd2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.form.newPwd) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        teaName:"",
        // 绑定的表单数据源
        form:{
          teaName:"",
          oldPwd:"",
          newPwd:"",
          newPwd2:""
        },
        tea:{
          teaId:"",
          teaName:"",
          teaAcademy:"",
          teaTitle:""
        },
        teacher:{
          teaId:"",
          teaPwd:"",
          teaName:""
        },
        formLabelWidth:"120px",
        // 修改密码的对话框
        dialogFormVisible:false,
        dialogFormVisible1:false,
        rules:{
          newPwd: [{ required: true, validator: validatePwd, trigger: "blur" }],
          newPwd2: [
            { required: true, validator: validatePwd2, trigger: "blur" },
          ],
        }
      }
    },
    mounted() {
      // 调用获取教师信息的数据
      this.information();
      this.teaName = localStorage.getItem("teaName");
    },
    // name:'index'
    methods:{
      // 获取教师信息
      selectOne(){
        // 打开对话框
        this.dialogFormVisible1 = true;
        let teaId = localStorage.getItem("teaId");
        // 发起GET请求，获取信息
        axios.get(
          "http://localhost:1313/teacher/selectOne",
          {params:{teaId:teaId}}
        ).then((res)=>{
          console.log(res);
          if(res.data.code == 200){
            // 将返回的数据赋值给student表单
            this.tea.teaId = res.data.data.teaId;
            this.tea.teaName = res.data.data.teaName;
            this.tea.teaAcademy = res.data.data.teaAcademy;
            this.tea.teaTitle = res.data.data.teaTitle;
          }else{
            this.$message.error(res.data.msg)
          }
        })
      },
      // 取消
      cancel1(){
        this.dialogFormVisible1 = false;
      },
      closeDialog(){
        this.dialogFormVisible1 = false;
      },
      // 取消修改密码
      cancel(){
        this.dialogFormVisible = false;
        this.form.stuName = "";
        this.form.oldPwd = "";
        this.form.newPwd ="";
        this.form.newPwd2="";
      },
      // 打开修改密码模态框，获取用户信息
      openDialog(){
        this.dialogFormVisible = true;
        // 获取本地存储的用户信息
        this.teacher.teaId = localStorage.getItem("teaId");
        // 根据用户名查询当前用户的密码
        axios.get(
          "http://localhost:1313/teacher/selectOne",
          {params:{teaId:this.teacher.teaId}}
        ).then((res)=>{
          console.log(res)
          //将返回数据赋值给绑定数据，完成数据渲染
          this.form.teaName = res.data.data.teaName;
          this.form.oldPwd = res.data.data.teaPwd;
        });


      },
      // 修改密码
      updatePwd(){
        let that = this;
        // 发起请求
        axios({
          headers:{'Content-Type':'application/x-www-form-urlencoded'},
          method:"post",
          url:"http://localhost:1313/teacher/updatePwd",
          data:Qs.stringify({
            teaId:that.teacher.teaId,
            teaName:that.form.teaName,
            teaPwd:that.form.oldPwd,
            newPwd:that.form.newPwd})
        }).then((res)=>{
          console.log(res)
          //判断当前状态码请求是否成功
          if (res.data.code == 200) {
            //1.消息提示
            that.$message({
              message: res.data.msg,
              type:'success'
            })
            // 将最新的用户密码信息存入本地
            localStorage.setItem("teaPwd",that.form.newPwd);

          } else {
            that.$message({
              message: res.data.msg,
              type:'error'
            })
          }
          // 关闭修改密码模态框
          // 清空文本框数据
          that.form.teaName ="";
          that.form.oldPwd = "";
          that.form.newPwd  ="";
          that.form.newPwd2  ="";
          that.dialogFormVisible = false;
        })
      },
      // 退出系统
      loginout(){
        // 退出到达根页面
        this.$router.replace("/");
        // 清除本地存储
        localStorage.clear();
      },
      // 将老师授课信息存入本地
      information(){
        // 获取到教师id
       let teaId = localStorage.getItem("teaId");
       // 发起请求获取数据
        axios.get(
          "http://localhost:1313/course/selectCourse",
          {params:{teaId:teaId}}
        ).then((res)=>{
          console.log(res);
          if(res.data.code == 200){
            // 将课程信息存入本地
            localStorage.setItem("couId",res.data.data.couId);
            localStorage.setItem("couName",res.data.data.couName);
          }else{
            this.$message.error(res.data.msg)
          }
        })
      }
    },

  }
</script>
<style scoped>
  .el-input--suffix .el-input__inner {
    padding-right: 15px;
  }
  .form{
    display: grid;
    justify-content: center;
    /* align-items: center; */
    justify-items: center;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 15px;
  }
  .form{
    display: grid;
    justify-content: center;
    /* align-items: center; */
    justify-items: center;
  }
  /*字体信息*/
  .size{
    font-size: 18px;
  }
  .ms{
    font-size: 16px;
  }
  .person{
    margin-left: 20px;
  }
  .el-button--info.is-plain:hover {
    color: #fff;
    background: #5ed4ff;
    border-color: #fff;
  }
  .el-icon-s-custom:before {
    content: "\E7AB";
  }
  .myHeight{
    margin-top: -40px;
  }
  .el-header{
    display: flex;
    background-color: #5ed4ff;
    color: #896363;
    padding-top: 20px;
    height: 100%;
    font-size: 18px;
    margin-top: -12px;
  }
  .el-aside {
    margin-top: 15px;
    background-color: #a172d1;
    color: black;
    height: 100%;
  }

  .el-main {
    color: #2c9999;
  }
  .el-container{
    height: 100%;
  }

  .el-submenu__title {
    padding-left: 40px;
    color: rgb(167, 131, 153);
    background-color: rgb(43 107 43);
  }
</style>
